<template>
  <div class="l-rblock" @mousedown="handleMouseDown">
    <div v-if="ruleShow" class="print-ruler-eye" @click="rulerEyeClick">
      <i :class="isShowRulerLine ? 'learun-icon-eye' : 'learun-icon-no-eye'" />
    </div>
    <SketchRule
      :key="myScale"
      v-if="ruleShow"
      :lang="lang"
      :scale="myScale"
      :thick="thick"
      :width="width"
      :height="height"
      :startX="startX"
      :startY="startY"
      :shadow="shadow"
      :palette="palette"
      :isShowReferLine="isShowRulerLine"
      :horLineArr="lines.h"
      :verLineArr="lines.v"
      @handleLine="handleLine"
    >
    </SketchRule>

    <page
      :pageConfig="pageConfig"
      :components="pageComponents"
      :headerComponents="headerComponents"
      :activeComponent="activeComponent"
      :scale="myScale"
      :gridShow="gridShow"
      :gridSize="gridSize"
      :pageHeight="pageHeight"
      :pageWidth="pageWidth"
      :pageActive="pageActive"
      :pageNumbers="pageNumbers"
      @setActive="setActive"
    ></page>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import SketchRule from "vue-sketch-ruler";

import page from "./page";

export default {
  props: {
    pageConfig: {
      type: Object,
      default: () => ({}),
    },
    pageComponents: {
      type: Array,
      default: () => [],
    },
    headerComponents: {
      type: Array,
      default: () => [],
    },

    activeComponent: {
      type: Object,
      default: () => ({}),
    },
    pageHeight: Number,
    pageWidth: Number,

    scale: Number,
    gridShow: Boolean,
    gridSize: Number,
    ruleShow: Boolean,

    pageActive: Number,
    pageNumbers: Number,
  },
  components: { page, SketchRule },
  data() {
    return {
      lang: "zh-CN", // 中英文
      thick: 20, // 标尺厚度
      startX: 0,
      startY: 0,
      isShowRulerLine: true, // 显示参考线

      lines: {
        h: [],
        v: [],
      }
    };
  },
  computed: {
    ...mapGetters(["screen", "screenHeight"]),
    width() {
      return this.screen - 56 - 240 - 304 - this.thick;
    },
    height() {
      return this.screenHeight - 48 - 40 - 56 - this.thick;
    },
    shadow() {
      return {
        x: 0,
        y: 0,
        width: 0,
        height: 0,
      };
    },
    palette() {
      return {
        bgColor: "rgba(225,225,225, 0)",
        longfgColor: "#BABBBC",
        shortfgColor: "#C8CDD0",
        fontColor: "#7D8694",
        shadowColor: "#E8E8E8",
        lineColor: "#00FFFF",
        borderColor: "#DADADC",
        cornerActiveColor: "rgb(235, 86, 72, 0.6)",
      };
    },
    myScale() {
      return this.scale / 100;
    },
  },
  mounted() {},

  methods: {
    // 标尺点击事件
    rulerEyeClick() {
      this.isShowRulerLine = !this.isShowRulerLine;
    },
    handleLine(lines) {
      this.lines = lines;
    },
    handleMouseDown() {
      this.$emit("setActive", null);
    },
    setActive(data) {
      this.$emit("setActive", data);
    },

  },
};
</script>
<style lang="scss">
.print-ruler-eye {
  position: absolute;
  left: 0;
  z-index: 5;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
